import { defineComponent, reactive, ref } from "vue";
import ProblemService from "./problem.service";
import TablePage from "@/components/TablePage/TablePage";
import Add from "./Add/Add";
import { tablesInterface } from "@/common/interface/table.interface";
import Allocation from "./Allocation/Allocation";

export default defineComponent({
  name: 'problem',
  setup() {
    const tablePageRef = ref(null as any);
    const problemService = new ProblemService();
    const table = reactive({
      list: [
        {
          title: "问题管理",
          rowKey: "id",
          columns: [
            {
              title: "ID",
              dataIndex: "id",
              align: "center",
              width: "80px",
            },
            {
              title: "问题名称",
              dataIndex: "name",
              align: "center",
            }
          ],
          toolbar: {
            left: ["refresh", "add"],
            right: ["filter"],
            add: {
              handler: () => {
                const addPopupRef = tablePageRef.value.getPopup("addRef");
                addPopupRef.value.open({ type: 'add' });
              }
            },
          },
          searchForm: {},
          service: problemService,
          operationWidth: '200px',
          operation: ({ record }) => [
            {
              type: "edit",
              clickHandler: () => {
                const addPopupRef = tablePageRef.value.getPopup("addRef");
                addPopupRef.value.open({ type: 'edit', id: record.id });
              }
            },
            {
              type: 'custom',
              el: () => <a-button size="small" type="primary">分配产品</a-button>,
              clickHandler: () => {
                const allocationPopupRef = tablePageRef.value.getPopup("allocationRef");
                allocationPopupRef.value.open({ id: record.id });
              }
            },
            {
              type: "delete",
              clickHandler: "delete",
            },
          ],
          popups: [
            {
              ref: "addRef",
              dom: () => <Add onChange={()=>{ tablePageRef.value.reload(); }}/>
            },
            {
              ref: 'allocationRef',
              dom: () => <Allocation />
            }
          ],
          pagination: true,
          tableSourceFormat: {
            data: 'rows',
            pageSize: 'pageSize',
            current: 'pageNum',
          },
        }
      ],
    } as tablesInterface);
    const config = reactive({
      table: table.list[0]
    })
    return () => (
      // <div>问题管理（故障管理）</div>
      <TablePage ref={tablePageRef} config={config} />
    )
  }
})